This is an overview of HTMLWidgets and associated subprojects.

The HTMLWidgets family of visualization tools are JavaScript packages with R bindings so you can use them within your R code.

Leaflet

Leaflet is a popular open-source JavaScript API for placing zoomable maps (sometimes called “slippy maps”) in a browser. The Leaflet for R project wraps this JavaScript API in R bindings – so you don’t need to program in JavaScript, CSS, and HTML, you just program in R.

The Leaflet for R API is located here.

A very simple map of our class location is drawn in the code snip-it below:

# HTMLWidgets -- Leaflet Example
# ------------------------------
library(leaflet)
leaflet() %>%
  setView(-96.737010, 43.522951, zoom = 16) %>% 
  addTiles() %>%
  addMarkers(-96.737010, 43.522951, popup = "Augie!") 

You can accomplish quite a bit with the Leaflet for R package. The next example is uses a weather-radar set of tiles for the backdrop (available over the US only), and starts zoomed-out a bit, but still centered on Augie:

# Leaflet w/weather tiles
# -----------------------
leaflet() %>% addTiles() %>% setView(-96.737010, 43.522951, zoom = 6) %>%
  addWMSTiles(
    "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
    layers = "nexrad-n0r-900913",
    options = WMSTileOptions(format = "image/png", transparent = TRUE),
    attribution = "Weather data © 2012 IEM Nexrad"
  )

To check our work, we can view a similar area from the National Weather Service

Dygraphs

Dygraphs is for time-series data, and includes features like interactive range selectors. The dygraphs for R API shows the packages many features.

# Dygraphs example 1
# ------------------
library(dygraphs)
lungDeaths <- cbind(mdeaths, fdeaths)
dygraph(lungDeaths) %>% dyRangeSelector()

A stacked graph:

# Dygraphs example 2
# ------------------
dygraph(lungDeaths) %>%
  dySeries("mdeaths", label = "Male") %>%
  dySeries("fdeaths", label = "Female") %>%
  dyOptions(stackedGraph = TRUE) %>%
  dyRangeSelector(height = 20)

Plotly

Plotly is a way to get our ggplot2 visualizations to the web, and it also ads some interesting interactive features. There are many different variations available; the API is here.

# Plotly
# ------
library(ggplot2)
library(plotly)
p <- ggplot(data = diamonds, aes(x = cut, fill = clarity)) +
  geom_bar(position = "dodge")
ggplotly(p)

Another plot (with warning/informational messages)

d <- diamonds[sample(nrow(diamonds), 500), ]
plot_ly(d, x = d$carat, y = d$price, 
        text = paste("Clarity: ", d$clarity),
        mode = "markers", color = d$carat, size = d$carat)
No trace type specified:
  Based on info supplied, a 'scatter' trace seems appropriate.
  Read more about this trace type -> https://plot.ly/r/reference/#scatter
`line.width` does not currently support multiple values.No trace type specified:
  Based on info supplied, a 'scatter' trace seems appropriate.
  Read more about this trace type -> https://plot.ly/r/reference/#scatter
`line.width` does not currently support multiple values.

NetworkD3

The next set of visualizations are created with the [NetworkD3[(http://christophergandrud.github.io/networkD3/)] package.

Force-Directed Network Graphs

library(networkD3)
data(MisLinks, MisNodes)
forceNetwork(Links = MisLinks, Nodes = MisNodes,
             Source = "source", Target = "target",
             Value = "value", NodeID = "name",
             Group = "group", opacity = 0.8)

Sankey Diagrams

# Sankey Diagram
# --------------
# Load energy projection data
# Load energy projection data
URL <- paste0(
  "https://cdn.rawgit.com/christophergandrud/networkD3/",
  "master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
# Plot
sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
              Target = "target", Value = "value", NodeID = "name",
              units = "TWh", fontSize = 12, nodeWidth = 30)

Radial Network:

# Radial network
# --------------
URL <- paste0(
  "https://cdn.rawgit.com/christophergandrud/networkD3/",
  "master/JSONdata//flare.json")
## Convert to list format
Flare <- jsonlite::fromJSON(URL, simplifyDataFrame = FALSE)
# Use subset of data for more readable diagram
Flare$children = Flare$children[1:3]
radialNetwork(List = Flare, fontSize = 10, opacity = 0.9)

Diagonal Network

# Diagonal Network
diagonalNetwork(List = Flare, fontSize = 10, opacity = 0.9)

Wrap-up

These are some of the visualization tools in the HTML Widgets library.

Thursday, March 7, 2019

LS0tCnRpdGxlOiAiSFRNTCBXaWRnZXRzIgpvdXRwdXQ6IGh0bWxfbm90ZWJvb2sKLS0tCgpUaGlzIGlzIGFuIG92ZXJ2aWV3IG9mIFtIVE1MV2lkZ2V0c10oaHR0cDovL3d3dy5odG1sd2lkZ2V0cy5vcmcvKSBhbmQgYXNzb2NpYXRlZCBzdWJwcm9qZWN0cy4gIAoKVGhlIEhUTUxXaWRnZXRzIGZhbWlseSBvZiB2aXN1YWxpemF0aW9uIHRvb2xzIGFyZSBKYXZhU2NyaXB0IHBhY2thZ2VzIHdpdGggUiBiaW5kaW5ncyBzbyB5b3UgY2FuIHVzZSB0aGVtIHdpdGhpbiB5b3VyIFIgY29kZS4KCiMjTGVhZmxldAoKTGVhZmxldCBpcyBhIHBvcHVsYXIgb3Blbi1zb3VyY2UgSmF2YVNjcmlwdCBBUEkgZm9yIHBsYWNpbmcgem9vbWFibGUgbWFwcyAoc29tZXRpbWVzIGNhbGxlZCAic2xpcHB5IG1hcHMiKSBpbiBhIGJyb3dzZXIuICBUaGUgTGVhZmxldCBmb3IgUiBwcm9qZWN0IHdyYXBzIHRoaXMgSmF2YVNjcmlwdCBBUEkgaW4gUiBiaW5kaW5ncyAtLSBzbyB5b3UgZG9uJ3QgbmVlZCB0byBwcm9ncmFtIGluIEphdmFTY3JpcHQsIENTUywgYW5kIEhUTUwsIHlvdSBqdXN0IHByb2dyYW0gaW4gUi4KClRoZSBMZWFmbGV0IGZvciBSIEFQSSBpcyBsb2NhdGVkIFtoZXJlXShodHRwOi8vcnN0dWRpby5naXRodWIuaW8vbGVhZmxldC8pLgoKQSB2ZXJ5IHNpbXBsZSBtYXAgb2Ygb3VyIGNsYXNzIGxvY2F0aW9uIGlzIGRyYXduIGluIHRoZSBjb2RlIHNuaXAtaXQgYmVsb3c6CmBgYHtyfQojIEhUTUxXaWRnZXRzIC0tIExlYWZsZXQgRXhhbXBsZQojIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLQpsaWJyYXJ5KGxlYWZsZXQpCmxlYWZsZXQoKSAlPiUKICBzZXRWaWV3KC05Ni43MzcwMTAsIDQzLjUyMjk1MSwgem9vbSA9IDE2KSAlPiUgCiAgYWRkVGlsZXMoKSAlPiUKICBhZGRNYXJrZXJzKC05Ni43MzcwMTAsIDQzLjUyMjk1MSwgcG9wdXAgPSAiQXVnaWUhIikgCgpgYGAKCllvdSBjYW4gYWNjb21wbGlzaCBxdWl0ZSBhIGJpdCB3aXRoIHRoZSBMZWFmbGV0IGZvciBSIHBhY2thZ2UuICBUaGUgbmV4dCBleGFtcGxlIGlzIHVzZXMgYSB3ZWF0aGVyLXJhZGFyIHNldCBvZiB0aWxlcyBmb3IgdGhlIGJhY2tkcm9wIChhdmFpbGFibGUgb3ZlciB0aGUgVVMgb25seSksIGFuZCBzdGFydHMgem9vbWVkLW91dCBhIGJpdCwgYnV0IHN0aWxsIGNlbnRlcmVkIG9uIEF1Z2llOgpgYGB7cn0KIyBMZWFmbGV0IHcvd2VhdGhlciB0aWxlcwojIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tCmxlYWZsZXQoKSAlPiUgYWRkVGlsZXMoKSAlPiUgc2V0VmlldygtOTYuNzM3MDEwLCA0My41MjI5NTEsIHpvb20gPSA2KSAlPiUKICBhZGRXTVNUaWxlcygKICAgICJodHRwOi8vbWVzb25ldC5hZ3Jvbi5pYXN0YXRlLmVkdS9jZ2ktYmluL3dtcy9uZXhyYWQvbjByLmNnaSIsCiAgICBsYXllcnMgPSAibmV4cmFkLW4wci05MDA5MTMiLAogICAgb3B0aW9ucyA9IFdNU1RpbGVPcHRpb25zKGZvcm1hdCA9ICJpbWFnZS9wbmciLCB0cmFuc3BhcmVudCA9IFRSVUUpLAogICAgYXR0cmlidXRpb24gPSAiV2VhdGhlciBkYXRhIMKpIDIwMTIgSUVNIE5leHJhZCIKICApCmBgYAoKVG8gY2hlY2sgb3VyIHdvcmssIHdlIGNhbiB2aWV3IGEgc2ltaWxhciBhcmVhIGZyb20gdGhlIFtOYXRpb25hbCBXZWF0aGVyIFNlcnZpY2VdKGh0dHBzOi8vcmFkYXIud2VhdGhlci5nb3YvQ29udXMvdXBwZXJtaXNzdmx5LnBocCkKCiNEeWdyYXBocwoKRHlncmFwaHMgaXMgZm9yIHRpbWUtc2VyaWVzIGRhdGEsIGFuZCBpbmNsdWRlcyBmZWF0dXJlcyBsaWtlIGludGVyYWN0aXZlIHJhbmdlIHNlbGVjdG9ycy4gIFRoZSBbZHlncmFwaHMgZm9yIFIgQVBJXShodHRwOi8vcnN0dWRpby5naXRodWIuaW8vZHlncmFwaHMvKSBzaG93cyB0aGUgcGFja2FnZXMgbWFueSBmZWF0dXJlcy4KCmBgYHtyfQojIER5Z3JhcGhzIGV4YW1wbGUgMQojIC0tLS0tLS0tLS0tLS0tLS0tLQpsaWJyYXJ5KGR5Z3JhcGhzKQpsdW5nRGVhdGhzIDwtIGNiaW5kKG1kZWF0aHMsIGZkZWF0aHMpCmR5Z3JhcGgobHVuZ0RlYXRocykgJT4lIGR5UmFuZ2VTZWxlY3RvcigpCmBgYAoKQSBzdGFja2VkIGdyYXBoOgpgYGB7cn0KIyBEeWdyYXBocyBleGFtcGxlIDIKIyAtLS0tLS0tLS0tLS0tLS0tLS0KZHlncmFwaChsdW5nRGVhdGhzKSAlPiUKICBkeVNlcmllcygibWRlYXRocyIsIGxhYmVsID0gIk1hbGUiKSAlPiUKICBkeVNlcmllcygiZmRlYXRocyIsIGxhYmVsID0gIkZlbWFsZSIpICU+JQogIGR5T3B0aW9ucyhzdGFja2VkR3JhcGggPSBUUlVFKSAlPiUKICBkeVJhbmdlU2VsZWN0b3IoaGVpZ2h0ID0gMjApCmBgYAoKCiNQbG90bHkKClBsb3RseSBpcyBhIHdheSB0byBnZXQgb3VyIGdncGxvdDIgdmlzdWFsaXphdGlvbnMgdG8gdGhlIHdlYiwgYW5kIGl0IGFsc28gYWRzIHNvbWUgaW50ZXJlc3RpbmcgaW50ZXJhY3RpdmUgZmVhdHVyZXMuICBUaGVyZSBhcmUgbWFueSBkaWZmZXJlbnQgdmFyaWF0aW9ucyBhdmFpbGFibGU7IHRoZSBBUEkgaXMgW2hlcmVdKGh0dHBzOi8vcGxvdC5seS9yLykuCgpgYGB7cn0KIyBQbG90bHkKIyAtLS0tLS0KbGlicmFyeShnZ3Bsb3QyKQpsaWJyYXJ5KHBsb3RseSkKcCA8LSBnZ3Bsb3QoZGF0YSA9IGRpYW1vbmRzLCBhZXMoeCA9IGN1dCwgZmlsbCA9IGNsYXJpdHkpKSArCiAgZ2VvbV9iYXIocG9zaXRpb24gPSAiZG9kZ2UiKQpnZ3Bsb3RseShwKQpgYGAKCkFub3RoZXIgcGxvdCAod2l0aCB3YXJuaW5nL2luZm9ybWF0aW9uYWwgbWVzc2FnZXMpCgpgYGB7cn0KZCA8LSBkaWFtb25kc1tzYW1wbGUobnJvdyhkaWFtb25kcyksIDUwMCksIF0KcGxvdF9seShkLCB4ID0gZCRjYXJhdCwgeSA9IGQkcHJpY2UsIAogICAgICAgIHRleHQgPSBwYXN0ZSgiQ2xhcml0eTogIiwgZCRjbGFyaXR5KSwKICAgICAgICBtb2RlID0gIm1hcmtlcnMiLCBjb2xvciA9IGQkY2FyYXQsIHNpemUgPSBkJGNhcmF0KQpgYGAKCiMjTmV0d29ya0QzCgpUaGUgbmV4dCBzZXQgb2YgdmlzdWFsaXphdGlvbnMgYXJlIGNyZWF0ZWQgd2l0aCB0aGUgW05ldHdvcmtEM1soaHR0cDovL2NocmlzdG9waGVyZ2FuZHJ1ZC5naXRodWIuaW8vbmV0d29ya0QzLyldIHBhY2thZ2UuCgojIyNGb3JjZS1EaXJlY3RlZCBOZXR3b3JrIEdyYXBocwoKYGBge3J9CmxpYnJhcnkobmV0d29ya0QzKQpkYXRhKE1pc0xpbmtzLCBNaXNOb2RlcykKZm9yY2VOZXR3b3JrKExpbmtzID0gTWlzTGlua3MsIE5vZGVzID0gTWlzTm9kZXMsCiAgICAgICAgICAgICBTb3VyY2UgPSAic291cmNlIiwgVGFyZ2V0ID0gInRhcmdldCIsCiAgICAgICAgICAgICBWYWx1ZSA9ICJ2YWx1ZSIsIE5vZGVJRCA9ICJuYW1lIiwKICAgICAgICAgICAgIEdyb3VwID0gImdyb3VwIiwgb3BhY2l0eSA9IDAuOCkKYGBgCgojIyNTYW5rZXkgRGlhZ3JhbXMKCmBgYHtyfQojIFNhbmtleSBEaWFncmFtCiMgLS0tLS0tLS0tLS0tLS0KIyBMb2FkIGVuZXJneSBwcm9qZWN0aW9uIGRhdGEKIyBMb2FkIGVuZXJneSBwcm9qZWN0aW9uIGRhdGEKVVJMIDwtIHBhc3RlMCgKICAiaHR0cHM6Ly9jZG4ucmF3Z2l0LmNvbS9jaHJpc3RvcGhlcmdhbmRydWQvbmV0d29ya0QzLyIsCiAgIm1hc3Rlci9KU09OZGF0YS9lbmVyZ3kuanNvbiIpCkVuZXJneSA8LSBqc29ubGl0ZTo6ZnJvbUpTT04oVVJMKQojIFBsb3QKc2Fua2V5TmV0d29yayhMaW5rcyA9IEVuZXJneSRsaW5rcywgTm9kZXMgPSBFbmVyZ3kkbm9kZXMsIFNvdXJjZSA9ICJzb3VyY2UiLAogICAgICAgICAgICAgIFRhcmdldCA9ICJ0YXJnZXQiLCBWYWx1ZSA9ICJ2YWx1ZSIsIE5vZGVJRCA9ICJuYW1lIiwKICAgICAgICAgICAgICB1bml0cyA9ICJUV2giLCBmb250U2l6ZSA9IDEyLCBub2RlV2lkdGggPSAzMCkKYGBgCgojIyNSYWRpYWwgTmV0d29yazoKCmBgYHtyfQojIFJhZGlhbCBuZXR3b3JrCiMgLS0tLS0tLS0tLS0tLS0KVVJMIDwtIHBhc3RlMCgKICAiaHR0cHM6Ly9jZG4ucmF3Z2l0LmNvbS9jaHJpc3RvcGhlcmdhbmRydWQvbmV0d29ya0QzLyIsCiAgIm1hc3Rlci9KU09OZGF0YS8vZmxhcmUuanNvbiIpCgojIyBDb252ZXJ0IHRvIGxpc3QgZm9ybWF0CkZsYXJlIDwtIGpzb25saXRlOjpmcm9tSlNPTihVUkwsIHNpbXBsaWZ5RGF0YUZyYW1lID0gRkFMU0UpCgojIFVzZSBzdWJzZXQgb2YgZGF0YSBmb3IgbW9yZSByZWFkYWJsZSBkaWFncmFtCkZsYXJlJGNoaWxkcmVuID0gRmxhcmUkY2hpbGRyZW5bMTozXQoKcmFkaWFsTmV0d29yayhMaXN0ID0gRmxhcmUsIGZvbnRTaXplID0gMTAsIG9wYWNpdHkgPSAwLjkpCmBgYAoKIyMjRGlhZ29uYWwgTmV0d29yawoKYGBge3J9CiMgRGlhZ29uYWwgTmV0d29yawpkaWFnb25hbE5ldHdvcmsoTGlzdCA9IEZsYXJlLCBmb250U2l6ZSA9IDEwLCBvcGFjaXR5ID0gMC45KQoKYGBgCgojI1dyYXAtdXAKClRoZXNlIGFyZSBzb21lIG9mIHRoZSB2aXN1YWxpemF0aW9uIHRvb2xzIGluIHRoZSBIVE1MIFdpZGdldHMgbGlicmFyeS4KClRodXJzZGF5LCBNYXJjaCA3LCAyMDE5Cgo=